<template>
  <div class="addAndEdit base-addAndEdit">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单信息</span>
        </div>
      </template>

      <el-form :model="form" label-width="100px" :disabled="type != 'add'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单编号">
              <el-input v-model="form.orderNum" placeholder="请输入订单编号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下单时间">
              <el-date-picker
                style="width: 100%"
                v-model="form.orderTime"
                type="datetime"
                placeholder="请选择下单时间"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路线名称">
              <el-input
                v-model="form.productName"
                placeholder="请输入路线名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发城市">
              <el-input v-model="form.cityName" placeholder="请输入出发城市" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发时间">
              <el-date-picker
                style="width: 100%"
                v-model="form.departureTime"
                type="datetime"
                placeholder="请选择出发时间"
                value-format="YYYY-MM-DD hh:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出游人数">
              <el-input
                v-model="form.peopleCount"
                placeholder="请输入出游人数"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他信息">
              <el-input
                v-model="form.orderDesc"
                type="textarea"
                maxlength="30"
                show-word-limit
                placeholder="其他信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card>
      <template #header>
        <div class="card-header">
          <span>游客信息</span>
          <el-icon
            v-if="type !== 'view'"
            :size="20"
            style="vertical-align: middle; margin-left: 5px; cursor: pointer"
            @click="handleAdd"
          >
            <CirclePlus />
          </el-icon>
        </div>
      </template>
      <el-table :data="tableData" border stripe>
        <el-table-column prop="travellerType" label="人群">
          <template #default="{ row }">
            <el-select
              v-model="row.travellerType"
              placeholder="请选择人群类别"
              style="width: 100%"
              :disabled="type != 'add'"
            >
              <el-option
                v-for="item in [
                  {
                    label: '成人',
                    value: 0,
                  },
                  {
                    label: '未成年',
                    value: 1,
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名">
          <template #default="{ row }">
            <el-input
              v-model="row.name"
              placeholder="请输入姓名"
              :disabled="type != 'add'"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template #default="{ row }">
            <el-select
              v-model="row.sex"
              placeholder="请选择性别"
              style="width: 100%"
              :disabled="type != 'add'"
            >
              <el-option
                v-for="item in [
                  {
                    label: '男',
                    value: 0,
                  },
                  {
                    label: '女',
                    value: 1,
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="phoneNum" label="手机号码">
          <template #default="{ row }">
            <el-input
              v-model="row.phoneNum"
              placeholder="请输入手机号码"
              :disabled="type != 'add'"
            />
          </template>
        </el-table-column>
        <el-table-column prop="credentialsType" label="证件类型">
          <template #default="{ row }">
            <el-select
              v-model="row.credentialsType"
              placeholder="请选择证件类型"
              style="width: 100%"
              :disabled="type != 'add'"
            >
              <el-option
                v-for="item in [
                  {
                    label: '身份证',
                    value: 0,
                  },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="credentialsNum" label="证件号码">
          <template #default="{ row }">
            <el-input
              v-model="row.credentialsNum"
              placeholder="请输入证件号码"
              :disabled="type != 'add'"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" header-align="center">
          <template v-if="type !== 'view'" #default="{ row, $index }">
            <el-button
              type="primary"
              size="small"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card>
      <template #header>
        <div class="card-header">
          <span>联系人信息</span>
        </div>
      </template>
      <el-form :model="form1" label-width="100px" :disabled="type != 'add'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="会员">
              <el-input v-model="form1.nickname" placeholder="请输入会员" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model="form1.name" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <el-input v-model="form1.phoneNum" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱">
              <el-input v-model="form1.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-row justify="center" style="padding: 10px">
      <template v-if="type == 'add'">
        <el-button type="primary" @click="handleSaveOrBack(true)"
          >保存</el-button
        >
      </template>
      <el-button @click="handleSaveOrBack(false)">返回</el-button>
    </el-row>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import Mitt from "@/mitt/index.js";

const emits = defineEmits(["sendData"]);
//从viewAll传递到的数据，用来判断当前组件的状态是添加还是编辑
const { currentShow } = defineProps(["currentShow"]);
//defineProps不支持二次解构
const { type, row } = currentShow;

const form = ref({
  orderNum: "",
  orderTime: "",
  productName: "",
  cityName: "",
  departureTime: "",
  peopleCount: "",
  orderDesc: "",
});

const form1 = ref({
  nickname: "",
  name: "",
  phoneNum: "",
  email: "",
});

const tableData = ref([]);
//添加
const handleAdd = () => {
  tableData.value.push({
    travellerType: "",
    name: "",
    sex: "",
    phoneNum: "",
    credentialsType: "",
    credentialsNum: "",
  });
};
//删除
const handleDelete = (row, indexToDelete) => {
  console.log(row, indexToDelete);
  tableData.value = tableData.value.filter(
    (_, index) => index != indexToDelete
  );
};

const handleSaveOrBack = (type) => {
  //如果是保存，调用保存的接口，否则直接返回
  if (type) {
    console.log(form.value);
    console.log(tableData.value);
    console.log(form1.value);
  }

  emits("sendData", {
    showComponents: "viewAll",
    type: "",
  });
};

//表单数据回显
const getList = () => {
  //通过传递的数据id请求接口
  console.log(row);
  let {
    data: {
      travellers,
      member,
      orderNum,
      orderTime,
      product: { productName, cityName, departureTime },
      peopleCount,
      orderDesc,
    },
  } = {
    code: 1,
    msg: "查询订单详情信息成功",
    data: {
      id: "0E7231DC797C486290E8713CA3C6ECCC",
      orderNum: "12345",
      orderTime: "2020-12-01 22:10:00.0",
      orderStatus: 1,
      peopleCount: 2,
      product: {
        id: "676C5BD1D35E429A8C2E114939C5685A",
        productNum: "doyens-002",
        productName: "北京三日游",
        cityName: "北京",
        departureTime: "2025-03-03 23:42:33.0",
        productPrice: 1200,
        productDesc: "不错的旅行",
        productStatus: 1,
      },
      travellers: [
        {
          id: "3FE27DF2A4E44A6DBC5D0FE4651D3D3E",
          name: "张龙",
          sex: "男",
          phoneNum: "13333333333",
          credentialsType: 0,
          credentialsNum: "123456789009876543",
          travellerType: 0,
        },
      ],
      member: {
        id: "E61D65F673D54F68B0861025C69773DB",
        name: "张三",
        nickname: "小三",
        phoneNum: "18888888888",
        email: "zs@163.com",
      },
      payType: 0,
      orderDesc: "没什么",
      productId: "676C5BD1D35E429A8C2E114939C5685A",
      memberId: "E61D65F673D54F68B0861025C69773DB",
    },
  };

  tableData.value = travellers;
  form1.value = member;

  form.value = {
    orderNum,
    orderTime,
    productName,
    cityName,
    departureTime,
    peopleCount,
    orderDesc,
  };
};

onMounted(() => {
  Mitt.emit("sendcrumbsInfo", { first: "用户管理", second: "用户表单" });
  if (type != "add") {
    //如果状态不处在添加状态时，需要请求接口回显数据
    getList();
  }
});
</script>

<style lang="less" scoped>
:deep(.el-card) {
  margin-top: 10px;
}
</style>
